import React, { useState, useEffect } from "react";
import { useRequest } from "ahooks";

import {
  NavBar,
  Image,
  Grid,
  Button,
  Popup,
  Form,
  Input,
  Dropdown,
  Radio,
  Space,
} from "antd-mobile";
import { useNavigate, useParams } from "react-router-dom";
import {
  lovelistQuery,
  allloveQuery,
  loverecordQuery,
} from "./sevice/loveQuery";
import style from "../love/css/Home.module.css";

export default function () {
  const navigate = useNavigate();
  const demoSrc =
    "https://2331520.s81i.faiusr.com/4/101/AFEIgKeOARAEGAAg7aPrhgYo4sju7QUw7gU4ugRAZQ.png";
  const demoSrc1 =
    "https://2331520.s81i.faiusr.com/4/101/AFEIgKeOARAEGAAg-aPrhgYo_OaF3AYw3AQ4nQJAZQ.png";

  const [data, setData] = useState([]);
  const [alldata, setallData] = useState([]);
  const [recorddata, setrecordData] = useState([]);
  const [visible5, setVisible5] = useState(false);
  const datalist = [
    {
      id: 1,
      name: "张*",
      money: "1000",
      activename: "听障儿童",
    },
    {
      id: 2,
      name: "张*",
      money: "1000",
      activename: "听障儿童",
    },
    {
      id: 3,
      name: "李*",
      money: "3000",
      activename: "自然保护",
    },
    {
      id: 4,
      name: "张*",
      money: "2000",
      activename: "教育助学",
    },
    {
      id: 5,
      name: "张*",
      money: "3000",
      activename: "听障儿童",
    },
    {
      id: 6,
      name: "张*",
      money: "1000",
      activename: "听障儿童",
    },
    {
      id: 7,
      name: "李*",
      money: "3000",
      activename: "自然保护",
    },
    {
      id: 8,
      name: "张*",
      money: "2000",
      activename: "教育助学",
    },
  ];
  const selModel = [
    {
      id: 1,
      activename: "听障儿童",
    },
  ];
  // 公益分类
  const listRes = useRequest(lovelistQuery, {
    onSuccess: (res) => {
      // console.log(res);
      let list = res.data.data.map((item) => {
        return {
          ...item,
        };
      });
      setData(list);
    },
  });

  // 所有公益
  const alllistRes = useRequest(allloveQuery, {
    onSuccess: (res) => {
      // console.log(res);
      let list = res.data.rows.map((item) => {
        return {
          ...item,
        };
      });
      setallData(list);
    },
  });

  // 捐赠记录
  const loverecordRes = useRequest(loverecordQuery, {
    onSuccess: (res, params) => {
      console.log(res);
      if (Object.keys(params[0]).length) {
        let list = res.recorddata.rows.map((item) => {
          return {
            ...item,
          };
        });
        setrecordData(list);
      }
      // else {
      //   let partb = res.data.msg.map((item) => {
      //     return {
      //       value: item.partbname,
      //       label: item.partbname,
      //     };
      //   });
      //   setPartb(partb);
      // }
    },
  });
  const Add = () => {
    alert("感谢有你");
    setVisible5(false);
  }
  // 发起捐款
  useEffect(() => {
    listRes.run({});
    alllistRes.run({});
    loverecordRes.run({});
  }, []);
  return (
    <div className={`base ${style.lovebody}`}>
      <NavBar
        style={{
          position: "fixed",
          top: "0",
          zIndex: "999",
          backgroundColor: "#fff",
          width: "100%",
        }}
        onBack={() => {
          navigate("/");
        }}
      >
        爱心公益
      </NavBar>
      {/* 头部 */}
      <div className={`base ${style.header}`}>
        <Image
          src={demoSrc}
          width={64}
          height={64}
          fit="cover"
          style={{ borderRadius: 8, width: "100%", height: "300px" }}
        />
        <Image
          src={demoSrc1}
          width={64}
          height={64}
          fit="cover"
          style={{
            borderRadius: 8,
            width: "300px",
            height: "140px",
            position: "absolute",
            top: "20%",
            left: "13%",
          }}
        />
      </div>
      {/* 公益活动分类 */}
      <div className={`base ${style.content}`}>
        <div className={`base ${style.title}`}>
          <span className={`base ${style.bold}`}></span>
          <span className={`base ${style.titleone}`}>公益事项</span>
        </div>
        <div className={`base ${style.contentflex}`}>
          <Grid columns={4} gap={4} style={{ marginTop: "12px" }}>
            {data.map((item, id) => {
              return (
                <Grid.Item
                  key={item.id}
                  onClick={() => {
                    navigate(`/love/${item.id}`);
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      flexDirection: "column",
                    }}
                  >
                    <img
                      className={`base ${style.contentimg}`}
                      src={"http://124.93.196.45:10001/" + item.imgUrl}
                    />
                    <span style={{ fontSize: "10px" }}>{item.name}</span>
                  </div>
                </Grid.Item>
              );
            })}
          </Grid>
        </div>
      </div>
      {/* 所有公益活动 */}
      <div className={`base ${style.content1}`}>
        <div className={`base ${style.title}`}>
          <span className={`base ${style.bold}`}></span>
          <span className={`base ${style.titleone}`}>帮她重获幸福</span>
        </div>
        <div className={`base ${style.contentflex}`}>
          <Grid columns={1} gap={4} style={{ marginTop: "12px" }}>
            {alldata.map((item, idx) => {
              return (
                <Grid.Item
                  key={idx}
                  onClick={() => {
                    navigate(item.path);
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      flexDirection: "column",
                    }}
                  >
                    <img
                      src={"http://124.93.196.45:10001/" + item.imgUrl}
                      className={`base ${style.allimg}`}
                    />
                    <span style={{ fontSize: "16px" }}>{item.name}</span>
                  </div>
                </Grid.Item>
              );
            })}
          </Grid>
        </div>
      </div>
      {/* 捐赠 */}
      <div className={`base ${style.content}`}>
        <div className={`base ${style.title}`}>
          <span className={`base ${style.bold}`}></span>
          <span className={`base ${style.titleone}`}>捐赠记录</span>
          <Button
            color="danger"
            style={{
              width: "80px",
              height: "40px",
              fontSize: "12px",
              marginLeft: "130px",
            }}
            onClick={() => {
              setVisible5(true);
            }}
          >
            我要捐赠
          </Button>
          <Popup
            visible={visible5}
            onMaskClick={() => {
              setVisible5(false);
            }}
            bodyStyle={{
              borderTopLeftRadius: "8px",
              borderTopRightRadius: "8px",
              minHeight: "40vh",
            }}
          >
            <Form>
              <Form.Item name="activityName">
                <Dropdown>
                  <Dropdown.Item key="sorter" title="公益活动">
                    <div style={{ padding: 12 }}>
                      <Space direction="vertical" block>
                        {selModel.map((item) => {
                          return <div key={item.id}>{item.activename}</div>;
                        })}
                      </Space>
                    </div>
                  </Dropdown.Item>
                </Dropdown>
              </Form.Item>
              <Form.Item name="donateMoney" label="捐助金额">
                <Input onChange={console.log} placeholder="请输入金额" />
              </Form.Item>
              <Button
                block
                type="submit"
                color="primary"
                size="large"
                onClick={() => {
                  Add();
                }}
              >
                提交
              </Button>
            </Form>
          </Popup>
        </div>
        <div className={`base ${style.contentflex}`}>
          <Grid
            columns={1}
            gap={4}
            style={{
              marginTop: "12px",
              overflow: "hidden",
              height: "140px",
              width: "330px",
            }}
          >
            {datalist.map((item, idx) => {
              return (
                <Grid.Item
                  key={idx}
                  onClick={() => {
                    navigate(item.path);
                  }}
                >
                  <div>
                    <span style={{ fontSize: "10px", fontSize: "16px" }}>
                      {item.name}捐赠
                    </span>

                    <span style={{ fontSize: "10px", fontSize: "16px" }}>
                      {item.activename}
                    </span>
                    <span
                      style={{
                        fontSize: "10px",
                        fontSize: "16px",
                        color: "red",
                      }}
                    >
                      ￥{item.money}
                    </span>
                    <span
                      style={{
                        color: "gray",
                        position: "relative",
                        left: "60px",
                      }}
                    >
                      2023-3-1
                    </span>
                  </div>
                </Grid.Item>
              );
            })}
          </Grid>
        </div>
      </div>
    </div>
  );
}
